<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import storeListItem from "@/components/store/storeListItem.vue";
import api from "@/api/api";

// 响应式数据
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

// 路由
const router = useRouter()

// 方法定义
const onClickLeft = () => {
  router.back()
}

const onLoad = () => {
  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }
  getStoreList()
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false
  refreshing.value = true
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}

const getStoreList = async () => {
  try {
    const res = await api.store.getStoreList()
    if (res.length == 0) finished.value = true
    list.value = [...list.value, ...res]
    finished.value = true
  } finally {
    loading.value = false
  }
}
</script>
<template>
  <div class="home">
    <van-nav-bar title="所有适用门店" fixed left-arrow class="nav_bar" safe-area-inset-top @click-left="onClickLeft" />
    <div class="list">
      <van-pull-refresh v-model:loading="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <storeListItem v-for="(v, i) in list" :key="i" :item="v"></storeListItem>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>



<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: #fff0e3;
  padding: 160px 50px 150px 50px;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  :deep(.van-nav-bar__left) {
    left: 30px;
  }

  :deep(.van-icon) {
    font-size: 50px;
    font-weight: bold;
    color: #333333;
  }

  .list {
    background: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 40px 50px 80px 50px;
  }
}

:deep(.van-list__loading) {
  font-size: 44px;
}

:deep(.van-list__finished-text) {
  font-size: 44px;
}
</style>
